<template>
	<view class="article u-f animate__animated animate__slideInLeft animate__fast">
		<!-- 作者 -->
		<view class="article__author u-f">
			<view class="article__author--title">
				<image :src="item.user?.userpic" mode="widthFix"/>
				<text class="article__author--nick">{{item.user?.username}}</text>
				<tabSexAge :sex="item.user?.sex??0" :age="item.user?.age??18"/>
			</view>
			<view class="article__author__right u-f-ac">
				<view class="article__author--add u-f-ac" v-show="!item.guanzhu" @tap="guanzhu">
					<text class="icon iconfont icon-tianjia" style="font-size: 26upx;"></text>
					<text>关注</text>
				</view>
				<text class="icon iconfont icon-tianjia remove"></text>
			</view>
		</view>
		<view class="article__title__time">{{item.createTime}}</view>
		<view class="article__author__p">
			<!-- 标题 -->
			<view class="article__title u-f-ac">
				<text>{{item.title}}</text>
			</view>
			<!-- 图片 -->
			<view class="article__content">
				<!-- 图片 -->
				<block v-for="(item2,index) in item.images" :key="index">
					<image :src="item2" mode="widthFix" @tap="imageDetails(index)"/>
				</block>
				<text class="article__content__play icon iconfont icon-bofang3" v-if="item.type=='video'"></text>
				<text class="article__content__PlayInfo"  v-if="item.type=='video'">
					{{item.playnum}}播放 {{item.long}}
				</text>
			</view>
			<!-- 点赞和转发 -->
			<view class="article__footer u-f-ac">
				<view>
					<!-- 点赞 -->
					<view :class="{'active':item.infonum?.index==1}" @tap="caozuo('dianzan')">
						<text class="icon iconfont icon-xiaolian1"></text>
						<text>{{item.dingCount}}</text>
					</view>
					<!-- 👎 -->
					<view :class="{'active':item.infonum?.index==2}" @tap="caozuo('cai')">
						<text class="icon iconfont icon-kulian"></text>
						<text>{{item.caiCount}}</text>
					</view>
				</view>
				<view>
					<!-- 评论 -->
					<view>
						<text class="icon iconfont icon-pinglun"></text>
						<text>{{item.commentCount}}</text>
					</view>
					<!-- 转发 -->
					<view>
						<text class="icon iconfont icon-zhuanfa"></text>
						<text>{{item.sharenum}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import tabSexAge from '../common/tag-sex-age.vue'
	const props = defineProps({
		item: {
			type: Object,
			require: true,
		},
		
	})
	console.log(props)

	// 关注
	function guanzhu(e) {
		props.item.isguanzhu = true;
		uni.showToast({
			title: '关注成功'
		});
	}
	// 点赞
	function caozuo(val) {
		if (val == "dianzan") {
			console.log(props.item.infonum.index == 1)
			//判断是否点击过
			if (props.item.infonum.index == 1) {
				props.item.infonum.index = 0;
				props.item.infonum.dingnum--;
			} else if (props.item.infonum.index == 2) {
				props.item.infonum.index = 1
				props.item.infonum.dingnum++;
				props.item.infonum.cainum--;
			} else {
				props.item.infonum.index = 1
				props.item.infonum.dingnum++;
			}
			return;
		}

		//判断是否点击过
		if (props.item.infonum.index == 2) {
			props.item.infonum.index = 0;
			props.item.infonum.cainum--;
		} else if (props.item.infonum.index == 1) {
			props.item.infonum.index = 2
			props.item.infonum.cainum++;
			props.item.infonum.dingnum--;
		} else {
			props.item.infonum.index = 2;
			props.item.infonum.cainum++;
		}

	}
	


	// 预览图片
	function imageDetails(index){
		uni.previewImage({
			urls:props.item.morepic,
			current:index,
		})
	}
</script>

<style scoped>
	@import '../../common/list.css';
	.article__title__time {
		color: #ccc;
		font-size: 28upx;
	}
</style>
